<template>
  <div class="login">
    <div class="top">
      <span class="cha" @click="goback">×</span>
      <span class="zc" @click="zc">注册账号</span>
    </div>
    <div class="dl">
      <p>登录后即可展示自己</p>
      <input type="email" placeholder="输入邮箱" v-jiaoyan="'required|email'" v-model="emailval">
      <span class="jiaoyan"></span>
      <form>
        <input type="password" placeholder="输入密码" v-jiaoyan="'required|minlength(6)|maxlength(12)'" autocomplete="off"
          v-model="passwordval">
        <span class="jiaoyan"></span>
      </form>
      <span @click="topass">忘记了？找回密码</span>
      <button @click="login" v-show="flag" class="dlbtn">登录</button>
    </div>
  </div>
  <AsyncPassword :userdata="userdata" @yzm="yzm" />
  <Async_message_part :flag="passwordFlag" :title="passwordTitle" />
  <AsyncRegister />
</template>

<script setup>
import { postLoginAPI, getLoginAPI, getLoginfindAPI } from '../api/Login-page';
import { ref, watch, defineAsyncComponent } from 'vue'
const AsyncPassword = defineAsyncComponent(() => import('./findpassword-page.vue'))
const AsyncRegister = defineAsyncComponent(() => import('./Register-page.vue'))
const Async_message_part = defineAsyncComponent(() => import('../components/common/message-part.vue'))

const passwordFlag = ref(false)
const passwordTitle = ref('')
const emailval = ref('')
const passwordval = ref('')
// 本人邮箱数据
const userdata = ref('')
// 邮箱正则
const email = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
// 控制登录按钮的显示隐藏
const flag = ref(false)
// 定时器时间
const time = ref(60)
// 定时器
const yzmset = ref(null)

const emit = defineEmits(['inithome'])
// 登录
async function login() {
  const result = await postLoginAPI(
    {
      "email": emailval.value,
      "password": passwordval.value
    }
  )
  console.log(result);
  // 状态码
  let status = result.status
  if (status === 200) {
    Timeout('登录成功！')
    document.querySelector('.login').style.transform = 'translateY(100%)';
    emit('inithome')
  } else {
    Timeout('邮箱或密码错误！')
  }
}


// 返回home页面
function goback() {
  document.querySelector('.login').style.transform = 'translateY(100%)';
}

// 找回密码接口的初始接口
async function passinit() {
  const result = await getLoginfindAPI(emailval.value)
  console.log(result);
  // 数据
  let data = result.data.data
  // 状态码
  let status = result.status
  if (status === 200) {
    userdata.value = data.accepted[0]
    document.querySelector('.password').style.transform = 'translateX(0)';
    // 定时器方法
    dsq()
  }
}

//定时器方法
function dsq() {
  // 定时器方法
  yzmset.value = setInterval(() => {
    let yzm = document.querySelector('.huoYzm')
    if (time.value === 0) {
      clearInterval(yzmset.value)
      yzm.innerHTML = '获取验证码'
      time.value = 60
      yzm.style.color = '#fff'
    } else {
      time.value--;
      yzm.innerHTML = time.value + 's'
      yzm.style.color = '#7e8c8d'
    }
    console.log(time.value);
  }, 1000)
}

//点击获取验证码
async function yzm() {
  if (time.value !== 60) {
    console.log(12345);
    Timeout('点击的太快啦~')
  } else {
    const result = await getLoginfindAPI(emailval.value)
    console.log(result);
    // 状态码
    let status = result.status
    if (status === 200) {
      // 定时器方法
      dsq()
    }
  }
}

// message简便方法
function Timeout(title) {
  passwordFlag.value = true
  passwordTitle.value = title
  setTimeout(() => {
    passwordFlag.value = false
    passwordTitle.value = ''
  }, 1000)
}

// 找回密码接口
async function pass() {
  getLoginAPI(`common/user/detectEmail/${emailval.value}`).then((res) => {
    console.log(res);
    // 状态码
    let code = res.data.code
    if (code === 200) {
      passinit()
    } else if (code === 'user:not_found') {
      Timeout('邮箱未注册！')
    }
  })
}

// 找回密码页面弹出
function topass() {
  if (email.test(emailval.value)) {
    pass()
  } else {
    Timeout('请输入正确的邮箱！')
  }
}

//注册页面弹出
function zc() {
  document.querySelector('.register').style.transform = 'translateX(0)';
}

// 监听到验证密码和邮箱变化时，判断验证是否成功
watch([emailval, passwordval], (newval) => {
  // 如果邮箱验证成功
  if (email.test(newval[0])) {
    // 如果密码验证成功
    if (newval[1].length >= 6 && 12 >= newval[1].length) {
      flag.value = true
      console.log(flag.value);
    } else {
      flag.value = false
    }
  } else {
    flag.value = false
  }
})

</script>

<style lang="scss" scoped>
$width: 101%;
$height: 100%;

body,
html {
  height: 100%;
}

.login {
  position: absolute;
  top: 0;
  left: 0;
  width: $width;
  height: $height;
  z-index: 10;
  transform: translateY(100%);
  transition: all 1s;
  /* 设置初始透明度 */
  background-color: rgba(255, 255, 255, 1);
  /* 最后一位数字表示透明度，取值范围为0~1，其中0为完全透明，1为不透明 */

  /* 过渡效果，通过动画改变透明度 */
  @keyframes fadeIn {
    0% {
      background-color: rgba(0, 0, 0, 1);
    }

    /* 开始时透明度为0 */
    100% {
      background-color: rgba(255, 255, 255, 1);
    }

    /* 结束时透明度为1 */
  }

  animation: fadeIn 1s ease;
  /* 持续3秒，ease为默认的动画速度曲线 */
}

.top {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .cha {
    color: #eaeaea;
    font-size: 20px;
    padding-left: 25px;
  }

  .zc {
    color: #eaeaea;
    font-size: 16px;
    padding-right: 25px;
  }
}

.dl {
  width: 273px;
  margin: auto;
  display: flex;
  flex-direction: column;
  padding-top: 20%;

  p {
    font-size: 22px;
    margin-bottom: 20px;
  }

  .jiaoyan {
    width: 100%;
    height: 20px;
  }

  form {
    height: 68px;
    display: flex;
    flex-direction: column;
  }

  input {
    height: 44px;
    width: 273px;
    color: #000;
    background: rgba(238, 238, 238, 0.36);
    padding-left: 10px;
    border-radius: 4px;
    border: none;
    caret-color: #face15;
    outline: none;
    font-size: 16px;

    &::placeholder {
      color: #b5b5b5;
    }
  }

  span {
    font-size: 12px;
    color: #617374;
  }

  .dlbtn {
    background: #fc3058;
    height: 44px;
    width: 283px;
    border-radius: 3px;
    color: #fff;
    border: none;
    margin-top: 20px;
    font-size: 16px;
  }
}
</style>